<template>
  <section>
    <el-container>

        <courseInfoSearch :search="search" :filters="filters" :add="add"/>

      <el-main>
        <!--<el-table :data="sheet.rows" highlight-current-row v-loading="sheet.loading" stripe="stripe" border="border"-->
                  <!--@sort-change="sortChange" style="width: 100%;" max-height="690" :row-style="tableRowStyle">-->

          <!--<el-table-column prop="createTime" label="时间" width="200" align="center" sortable="sortable"-->
                           <!--:show-overflow-tooltip="true">-->
            <!--<template slot-scope="scope">-->
              <!--<el-icon name="time"></el-icon>-->
              <!--<span style="margin-left: 10px">{{ formatDate(scope.row.createTime) }}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
        <!--</el-table>-->


        <el-row>
          <el-col :span="8" v-for="(item,index) in sheet.rows" :key="o" >
            <el-card :body-style="{ padding: '0px' }">
              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
              <div style="padding: 14px;">
                <span>{{item.name}}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ currentDate }}</time>
                  <el-button type="text" class="button">操作按钮</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

      </el-main>
      <lsz-pagination :getList="getList" :sheet="sheet"/>
    </el-container>

    <CourseInfoEdit ref="courseInfoEdit" :search="search"/>
  </section>
</template>

<script>
  import LszPagination from '@/components/common/lsz-pagination.vue';
  import CourseInfoSearch from './CourseInfoSearch.vue';
  import CourseInfoEdit from './CourseInfoEdit.vue';

  let data = () => {
    return {
      filters: {},
      sheet: {
        rows: [],
        total: 0,
        pageNum: 1,
        pageSize: 20,
        sort: 'createTime',
        order: 'desc',
        loading: false
      },
    }
  }
  let getList = function () {
    let param = {
      pageNum: this.sheet.pageNum,
      pageSize: this.sheet.pageSize,
      sort: this.sheet.sort,
      order: this.sheet.order,
      query: this.filters
    }
    this.sheet.loading = true
    this.$http.post('/courseInfoController/getCourseInfoList', param).then(res => {

      let response = res.data.data;

      this.sheet.total = response.total
      this.sheet.rows = response.content
      this.sheet.loading = false
    }).catch(() => this.sheet.loading = false)
  }

  export default {
    data: data,
    components: {
      LszPagination,
      CourseInfoSearch,
      CourseInfoEdit,
    },
    methods: {
      search: function () {
        this.sheet.pageNum = 1
        this.getList()
      },
      handleCommand: function (param) {
        this[param.method](param.args)
      },
      tableRowStyle({row, rowIndex}) {
        if (row.color) {
          return 'color: ' + row.color;
        }
      },
      killCourseInfoInfo: function (row) {
        let vm = this;
        vm.$confirm('是否确认提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          vm.$http.post('/courseInfoController/deleteCourseInfo', {id: row.id}).then(res => {
            if (!res.data.success) {
              vm.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
              });
              return
            }
            vm.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.search();
          })
        }).catch(() => {

        })
      },
      showCourseInfoInfo: function (row) {
        this.$refs.courseInfoEdit.show(row);
      },
      add: function () {
        this.$refs.courseInfoEdit.showAdd();
      },
      formatDate: function (d, format) {
        if (!d) {
          return "";
        }
        if (!format) {
          format = 'YYYY-MM-DD HH:mm:ss';
        }
        return this.$moment(d).format(format)
      },
      getList,
      sortChange: function (d) {
        this.sheet.sort = d && d.prop
        this.sheet.order = d && d.order && d.order.indexOf('asc') >= 0 ? 'ASC' : 'DESC'
        this.search()
      },
    },
    mounted: function () {
      this.search()
    },
    name: "CourseInfo"
  }
</script>

<style scoped>
</style>

